<template>
	<view class="longbingbing-change-user-type">
		<movable-area class="movable-area fix" :class="[{'user':type==1},{'coach':type==2}]"
			:style="{height:`350px`,bottom:`${configInfo.tabbarHeight}px`}" v-if="pShow">
			<movable-view class="movable-view flex-center" :x="oldMovable.x" :y="oldMovable.y" direction="vertical"
				@change="onChange" :style="{background:type==1?'#fff':pageColor}">
				<view @tap.stop="toOperItem" class="change-user-btn flex-center flex-column radius"
					:style="{background:type==1?primaryColor:'#fff'}">
					<block v-if="type==2">
						<image class="notice-img" src="https://api.huixuananmm.com/admin/anmo/coachport/coach-notice.png">
						</image>
						<view class="space-lg"></view>
					</block>
					<view class="text" :class="[{'f-icontext c-base':type==1},{'f-caption c-title abs':type==2}]">
						{{type==1?'操作端':'报警'}}
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			type: {
				type: Number,
				default () {
					return 1
				}
			}
		},
		mounted() {
			this.init()
		},
		data() {
			return {
				pShow: false
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			mineInfo: state => state.user.mineInfo,
			oldMovable: state => state.user.oldMovable,
		}),
		watch: {
			mineInfo(newVal, oldVal) {
				let {
					coach_status
				} = newVal
				this.toSetShow(coach_status)
			},
			userCoachStatus(newVal, oldVal) {
				let {
					status
				} = newVal
				this.toSetShow(status)
			}
		},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updateUserItem']),
			async init(refresh = false) {
				let {
					status = 0
				} = this.userCoachStatus
				this.toSetShow(status)
			},
			toSetShow(status) {
				status = status * 1
				let {
					web_coach_port = 0
				} = this.configInfo
				this.$set(this, 'pShow', (status == 2 || status == 3) && web_coach_port)
			},
			onChange(e) {
				let {
					x,
					y
				} = e.detail
				this.updateUserItem({
					key: 'oldMovable',
					val: {
						x,
						y
					}
				})
			},
			toOperItem() {
				let {
					type
				} = this
				switch (type) {
					case 1:
						this.$util.goUrl({
							url: `/pages/coach-index`,
							openType: `reLaunch`
						})
						break
					case 2:
						this.$emit('change')
						break
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.movable-area.user {
		width: 90rpx;
		pointer-events: none;

		.movable-view {
			width: 80rpx;
			height: 80rpx;
			padding-left: 5rpx;
			box-shadow: 0 1rpx 16rpx 0 rgba(127, 127, 127, 0.39);
			border-radius: 0 100rpx 100rpx 0;
			pointer-events: auto;
		}
	}

	.movable-area.coach {
		width: 120rpx;
		pointer-events: none;

		.movable-view {
			width: 120rpx;
			height: 120rpx;
			box-shadow: 0 2rpx 13rpx 0 rgba(218, 218, 218, 0.07);
			border-radius: 0 120rpx 120rpx 0;
			border: 1rpx solid #fff;
			pointer-events: auto;
		}
	}


	.longbingbing-change-user-type {
		.user {
			.change-user-btn {
				width: 70rpx;
				height: 70rpx;

				.text {
					transform: scale(0.8);
				}
			}
		}

		.coach {

			.change-user-btn {
				width: 96rpx;
				height: 96rpx;

				.notice-img {
					width: 80rpx;
					height: 80rpx;
				}

				.text {
					transform: scale(0.95);
					bottom: 20rpx;
				}
			}

		}

	}
</style>